<!DOCTYPE html>
<html>
<head>
  <!-- Layout blocking CSS -->
  <link rel="stylesheet" href="style1.css">
  <link rel="stylesheet" href="style2.css">
  <!-- JS in layout blocking phase -->
  <script src="test1.js"></script>
  <script src="test2.js"></script>
</head>
<body>
  <script>

  function sendValueToTest(value) {
    window.domAutomationController.send(value);
  }

  var resourcesNumber = -1;
  window.onload = function () {
      resourcesNumber = window.performance.getEntriesByType("resource").length;
  };

  function getResourceNumber() {
      setInterval(function() {
          if (resourcesNumber != -1) {
              sendValueToTest(resourcesNumber);
          }
      }, 300);
  }
  </script>

  <picture>
      <source media="(min-width: 980px)" srcset="200.png">
      <img src="400.png">
  </picture>

  <img srcset = "635.png 635w, 1270.png 1270w"
            sizes = "(max-width: 600px) calc(100vw - 32px),
                     (max-width: 1000px) calc(66.67vw - 32px),
                     635px">
  <img src="img1.png">
  <img src="img2.png">
  <img src="img3.png">
</body>
</html>
